import React, { useState } from 'react';
import { Form, Button, Row, Col, message } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import HexInput from './HexInput';

// 定义表单项的数据类型
interface FieldData {
    hex1?: string;
    hex2?: string;
    hasEnd?: boolean;
}

export const defaultAutoData = ()=>{
   
    if (localStorage.getItem('list')) {
        const initValue = JSON.parse(localStorage.getItem('list')!)
        console.log('initValue',initValue)
        return initValue.list??[]
    }

    return []
}


const HexForm: React.FC = () => {

    // 使用useState管理动态字段数组
    const [fields, setFields] = useState<FieldData[]>(() => {
       return defaultAutoData()
    });

    // 添加新行的函数
    const addField = () => {
        setFields([...fields, {}]);
    };

    // 删除指定索引行的函数
    const removeField = (index: number) => {
        setFields(fields.filter((_, i) => i !== index));
    };


    // 表单提交的处理函数
    const onFinish = (values: { list: FieldData[] }) => {
        console.log('Received values of form: ', values);
        localStorage.setItem('list', JSON.stringify({ list:values.list??[]}));
        (window as any).list = values.list
        message.success('表单提交成功');
    };

    return (
        <div>

            <Form name="dynamic_form"
            initialValues={{list:fields}}
                onFinish={onFinish}>
                {/* 表头 */}
                <Row gutter={[16, 8]} style={{ marginBottom: '20px' }}>
                    <Col span={8}>
                        <strong>收到的数据</strong>
                    </Col>
                    <Col span={8}>
                        <strong>自动回复数据</strong>
                    </Col>
   
                    <Col span={4}></Col>
                </Row>

                {/* 动态生成的表单项 */}
                {fields?.map?.((_, index) => (
                    <Row key={index} gutter={[16, 8]}>
                        <Col span={8}>
                            <Form.Item
                                name={['list', index, 'hex1']}
                                rules={[
                                    {
                                        required: true,
                                        message: `请输入收到的数据`,
                                    },
                                ]}
                            >
                                <HexInput placeholder={`收到的数据`} />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item
                                name={['list', index, 'hex2']}
                                rules={[
                                    {
                                        required: true,
                                        message: `请输入自动回复的数据`,
                                    },
                                ]}
                            >
                                <HexInput placeholder={`自动回复数据`} />
                            </Form.Item>
                        </Col> 
                        <Col span={4}>
                            <Button type="link" onClick={() => removeField(index)}>
                                删除
                            </Button>
                        </Col>
                    </Row>
                ))}
                {/* 添加新行按钮 */}
                <Form.Item>
                    <Button type="dashed" onClick={addField} block icon={<PlusOutlined />}>
                        添加一行
                    </Button>
                </Form.Item>
                {/* 提交按钮 */}
                <Form.Item style={{ textAlign: 'center' }}>
                    <Button type="primary" htmlType="submit">
                        保存
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
};

export default HexForm;






